<template>  
  <view class="manag-children-page">
	  <view ref="list" loadmoreoffset="100" @loadmore="loadmore" v-if="sutdents.length > 0">
	      <view v-for="std in sutdents" :key="std.id">
	        <Card :item="std" @queryPage="studentList"/>
	      </view>
	  </view>
	  <Empt v-else description="暂无数据"/>
  </view>
</template>  

<script setup lang="ts">  
 import {ref, onMounted} from "vue"
 import { homeServer } from "@/common/index";
 import Empt from "@/components/Empt/index.vue"
 import { urlHelp } from "@/utils/index"
 import Card from './card.vue';
  import { useStudentListStore } from "@/stores/useStudentList.js"
 const list= ref(null);
 const sutdents = ref([]);

const studentStore = useStudentListStore();
 // 获取学生信息
 const studentList = async () => {
 	try{
 		const {data, status} = await homeServer.studentList()
 		if(status === "200"){
			if(Array.isArray(data) && data.length > 0){
				sutdents.value = data?.map(item => urlHelp.imgAddPrefix(item, 'imageUrl')) || [];
			} else {
				sutdents.value = []
				studentStore.clearAll()
			}
 		}
 	}catch(e){
 		console.log(e)
 		//TODO handle the exception
 	}
 }
 
 const loadmore = async () => {
	 studentList();
 }
 
 onMounted(() => {
 	studentList();
 })
 
</script>  



<style lang="scss">
	page {
		background-color: #f5f9fa;
	}
</style>
<style lang="scss">
	.manag-children-page{
		.card{
			background-color: #fff;
		}
	
		.title{
			font-size: 30upx; line-height: 40upx; color: #000;
		}
		.num{
			font-size: 30upx; line-height: 40upx; color: #000;
		}
		.vip{
			font-size: 26upx;color: #484848; line-height: 40upx;
		}
		.van-button{
			margin-right: 20upx;
		}
	}

		
</style>